<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .inner_c {
            width: 1000px;
            margin: 0px auto;
        }

        .hearder {
            height: 58px;
            background-color: #191D3A;
        }

        .hearder .inner_c .logo {
            float: left;
            width: 170px;
            height: 58px;
            background: url(images/logo.png) no-repeat;
        }

        .hearder .inner_c .nav {
            float: left;
            width: 607px;
            height: 58px;
            padding-left: 30px;
        }

        .hearder .inner_c .nav ul li {
            list-style: none;
        }

        .hearder .inner_c .nav ul li a:hover {
            background: lime;
            color: red;
        }

        .hearder .inner_c .nav .current {
            background: lime;
            color: red;
        }

        .hearder .inner_c .nav ul li a {
            float: left;
            line-height: 58px;
            text-decoration: none;
            text-align: center;
            width: 100px;
            color: white;
            border-left: 1px red solid;
        }

        .hearder .inner_c .nav ul li .alast {
            border-right: 1px red solid;
        }

        .hearder .inner_c .jrwm {
            float: left;
            background: lime;
            margin-left: 40px;
            width: 100px;
            position: relative;
            left: 0;
            top: 12px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            color: white;
            border: 1px red solid;
            border-radius: 8px;
        }

        .hearder .inner_c .jrwm a {
            display: block;
            text-decoration: none;
        }

        .hearder .inner_c .jrwm a:hover {
            background: rebeccapurple;
            color: whitesmoke;
        }

        .banner {
            height: 465px;
            background: url(images/banner.jpg);
            position: relative;
        }

        .bcircle {
            float: left;
            height: 24px;
            width: 132px;
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -66px;
            text-align: center;
        }

        .bcircle ul {
            text-align: center;
            list-style: none;
            padding-top: 6px;
            padding-left: 14px;
        }

        .bcircle ul li {
            text-align: center;
            line-height: 12px;
            background: url("images/dian1.png") no-repeat;
            float: left;
            width: 12px;
            margin-right: 10px;
            height: 12px;
            cursor: pointer;

        }

        .bcircle ul .bcircle_first {
            background: url("images/dian2.png") no-repeat;
        }

        .content {
            height: 700px;
            padding-top: 50px;
        }

        .content .inner_c .product {
            height: 260px;
            border-bottom: 1px gray solid;
            position: relative;
            left: 0px;
            top: 0px;
        }

        .content .inner_c .product ul li {
            list-style: none;
            float: left;
            margin-right: 42px;
            text-align: center;
        }

        .content .inner_c .product ul .prolast {
            float: left;
            margin-right: 0px;
        }

        .content .inner_c .product ul li .img {
            width: 218px;
            height: 130px;
        }

        .content .inner_c .product ul li h3 {
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            width: 100%;
            text-align: center;
        }

        .content .inner_c .product ul li a {
            color: lime;
            text-decoration: none;
            padding-right: 10px;
            background: url("images/sanjiaoxing.png") no-repeat right center;
            text-align: center;
        }

        .content .inner_c .product .p_circle {
            position: absolute;
            height: 24px;
            width: 132px;
            left: 50%;
            bottom: -12px;
            background: white;
            margin-left: -66px;
        }

        .content .inner_c .product .p_circle ul {
            padding-top: 6px;
            padding-left: 14px;
        }

        .content .inner_c .product .p_circle ul li {
            text-align: center;
            line-height: 12px;
            background: url("images/dian1.png") no-repeat;
            float: left;
            width: 12px;
            margin-right: 10px;
            height: 12px;
            cursor: pointer;
        }

        .content .inner_c .product .p_circle .p_circle_first {
            background: url("images/dian2.png") no-repeat;
        }

        .content .info {

            padding-top: 30px;
            height: 500px;
            background: url(images/indexmainbg.jpg) no-repeat center center;
        }

        .content .info .news {
            float: left;
            width: 500px;
            background: url(images/bynewsbg.jpg) no-repeat;
            height: 420px;
            position: relative;
        }

        .content .info .news ul {
            list-style: none;
            position: relative;
            left: 0;
            top: 120px;
        }

        .content .info .news ul li {
            padding-left: 20px;
            height: 47px;
            line-height: 47px;
            border-bottom: 1px solid gray;
        }

        .content .info .news ul li span {
            font-size: 14px;
        }

        .content .info .news .nmore a {
            float: left;
            width: 70px;
            height: 30px;
            position: absolute;
            left: 220px;
            top: 40px;
            background: url(images/more2.png) no-repeat;
        }

        .content .info .news .nmore a:hover {
            background: url(images/more.png) no-repeat;
        }

        .content .info .news ul li a {
            margin-left: 20px;
            text-decoration: none;
        }

        .content .info .news ul li a:hover {
            color: green;
        }

        .content .info .jobs {
            float: left;
            width: 500px;
            background: url(images/byhrbg3.jpg) no-repeat;
            height: 420px;
        }

        .content .info .jobs .jobs_zczp {
            background: url(images/zczp.png) no-repeat;
            height: 60px;
            position: relative;
            left: 80px;
            top: 40px;
        }

        .content .info .jobs .jobs_nmore a {
            display: block;
            height: 60px;
            left: 216px;
            position: relative;
            top: -10px;
            background: url(images/more2.png) no-repeat;
        }

        .content .info .jobs .jobs_nmore a:hover {
            background: url(images/more.png) no-repeat;
        }

        .content .info .jobs .zczp {
            width: 300px;
            padding-left: 24px;
            position: relative;
            left: 0px;
            top: -20px;
        }

        .content .info .jobs .zczp h3 {
            font-size: 16px;
            color: white;

        }

        .content .info .jobs .zczp ul {

            list-style: none;
        }

        .content .info .jobs .zczp ul li {
            height: 44px;
            line-height: 44px;
            color: white;
            border-bottom: 1px gray solid;
        }

        .content .info .jobs .zczp ul a {
            color: white;
            text-decoration: none;
        }

        .content .info .jobs .zczp ul a:hover {
            background: magenta;
            color: green;
        }

        .cl {
            clear: both;
        }
        .footer{
            background: green;
        }
        .footer .copy img {
            height: 100px;
        }


        .footer .wm {
            float: left;
            line-height: 100px;
        }

        .footer .wm .sp1 {
            padding-right: 6px;
            border-right: 1px solid gray;
        }

        .footer .copy span {
            float: left;
            margin-left: 200px;
            line-height: 100px;
        }

        .fix {
            width: 100px;
            height: 50px;
            background: red;
            position: fixed;
            right: 60px;
            bottom: 100px;
            line-height: 50px;
            text-align: center;
            font-weight: bolder;
        }
    </style>
</head>

<body>
<div class="hearder">
    <div class="inner_c">

        <div class="logo">
        </div>

        <div class="nav">
            <ul>
                <li><a href="" class="current">首页</a></li>
                <li><a href="">博雅游戏</a></li>
                <li><a href="">博雅新闻</a></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">客服中心</a></li>
                <li><a href="" class="alast">投资者关系</a></li>
            </ul>
        </div>
        <div class="jrwm">
            <a href="">加入我们</a>
        </div>
    </div>

</div>
<div class="banner">
    <div class="bcircle">
        <ul>
            <li class="bcircle_first"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="content">
    <div class="inner_c">
        <div class="product">
            <ul>
                <li>
                    <img src="images/gamepic1.jpg" alt="" class="img">
                    <h3>BPT宣传片</h3>
                    <p>
                        <a href="">点击播放</a>
                    </p>
                </li>
                <li>
                    <img src="images/gamepic3.jpg" alt="" class="img">
                    <h3>BPT宣传片</h3>
                    <p>
                        <a href="">点击播放</a>
                    </p>
                </li>
                <li>
                    <img src="images/bpt.jpg" alt="" class="img">
                    <h3>BPT宣传片</h3>
                    <p>
                        <a href="">点击播放</a>
                    </p>
                </li>
                <li class="prolast">
                    <img src="images/video.jpg" alt="" class="img">
                    <h3>BPT宣传片</h3>
                    <p>
                        <a href="">点击播放</a>
                    </p>
                </li>
            </ul>
            <div class="p_circle">
                <ul>
                    <li class="p_circle_first"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="info">
        <div class="inner_c">
            <div class="news">
                <div class="nmore">
                    <a href=""></a>
                </div>
                <ul>
                    <li>
                        <span>
                            2018/5/16
                        </span>
                        <a href="">2015博雅国际博客大赛（BPT）在澳门落幕</a>
                    </li>
                    <li>
                        <span>
                            2018/5/16
                        </span>
                        <a href="">2015博雅国际博客大赛（BPT）在澳门落幕</a>
                    </li>
                    <li>
                         <span>
                            2018/5/16
                        </span>
                        <a href="">2015博雅国际博客大赛（BPT）在澳门落幕</a>
                    </li>
                    <li>
                        <span>
                            2018/5/16
                        </span>
                        <a href="">2015博雅国际博客大赛（BPT）在澳门落幕</a>
                    </li>
                </ul>
            </div>
            <div class="jobs">
                <div class="jobs_zczp">
                    <a href=""></a>
                </div>
                <div class="jobs_nmore">
                    <a href=""></a>
                </div>
                <div class="zczp">
                    <h3>专场招聘会:</h3>
                    <ul>
                        <li><a href="">PHP开发工程师</a></li>
                        <li><a href="">C++开发工程师</a></li>
                        <li><a href="">WEB前端开发工程师</a></li>
                        <li><a href="">大数据开发工程师</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="cl"></div>

<div class="footer">
    <div class="inner_c">
        <div class="wm">
            <span class="sp1">网站地址</span>
            <span>免责声明</span>
        </div>
        <div class="copy">
            <span>我啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
            <img src="images/govIcon.gif">
        </div>
    </div>
</div>
<div class="fix">
    返回导航
</div>
</body>
</html>